<template>
  <div>
    <el-card>
      <el-table
        v-loading="loading"
        :data="skuArr"
        :border="true"
        class="sku_table"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="skuName"
          label="名称"
          show-overflow-tooltip
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="skuDesc"
          label="描述"
          show-overflow-tooltip
          width="450px"
        ></el-table-column>
        <el-table-column label="图片" width="320px" align="center">
          <template #="{ row }">
            <div class="sku_table-img">
              <img :src="row.skuDefaultImg" :alt="row.skuName" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="150px"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="250px">
          <template #="{ row }">
            <el-button
              @click="updateSale(row)"
              :type="row.isSale ? 'success' : 'warning'"
              size="small"
              :icon="row.isSale ? 'Bottom' : 'Top'"
              title="上架OR下架"
            ></el-button>
            <el-button
              @click="updateSku"
              type="primary"
              size="small"
              icon="Edit"
              title="更新SKU"
            ></el-button>
            <el-button
              @click="findSku(row)"
              type="info"
              size="small"
              icon="infoFilled"
              title="查看详情"
            ></el-button>
            <el-popconfirm
              @confirm="removeSku(row.id)"
              :title="`确认删除${row.skuName}?`"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  title="删除SKU"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getHasSku"
      />
    </el-card>
    <!-- 抽屉组件-展示商品详情 -->
    <el-drawer
      class="sku_drawer"
      v-model="drawer"
      title="查看商品详情"
      size="40%"
    >
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo.price }}￥</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            class="sku_drawer-tag"
            v-for="item in skuInfo.skuAttrValueList"
            :key="item.id"
          >
            {{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            class="sku_drawer-tag"
            v-for="item in skuInfo.skuSaleAttrValueList"
            :key="item.id"
          >
            {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel
            v-loading="drawerLoad"
            :interval="4000"
            type="card"
            height="200px"
          >
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <img
                class="sku_drawer-image"
                :src="item.imgUrl"
                :alt="item.imgName"
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
// 引入请求
import {
  reqSkuList,
  reqSaleSku,
  reqCancelSale,
  reqSkuInfo,
  reqRemoveSku,
} from "@/api/product/sku";
import type {
  SkuResponseData,
  SkuData,
  SkuInfoData,
} from "@/api/product/sku/type";
// 引入防抖函数
import { debounce } from "@/utils/debounce";
//分页器当前页码
let pageNo = ref<number>(1);
//每一页展示几条数据
let pageSize = ref<number>(10);
let total = ref<number>(0);
let skuArr = ref<SkuData[]>([]);
// 控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false);
// 判断数据是否全部请求完毕
let loading = ref<boolean>(false);
// 判断抽屉的轮播图是否全部请求完毕
let drawerLoad = ref<boolean>(false);
let skuInfo = ref<any>({});
// 组件挂载完毕
onMounted(() => {
  getHasSku();
});
const getHasSku = async (pager = 1) => {
  loading.value = await true;
  // 当前分页器的页面
  pageNo.value = pager;
  let result: SkuResponseData = await reqSkuList(pageNo.value, pageSize.value);
  if (result.code === 200) {
    total.value = result.data.total;
    skuArr.value = result.data.records;
  }
  loading.value = await false;
};

// 分页器下拉菜单发生变化触发
const handleSizeChange = () => {
  getHasSku();
};
// 商品上架与下架操作
const updateSale = async (row: SkuData) => {
  //如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架
  //否则else情况与上面情况相反
  if (row.isSale == 1) {
    //下架操作
    await reqCancelSale(row.id as number);
    //提示信息
    ElMessage({ type: "warning", message: "下架成功" });
  } else {
    //下架操作
    await reqSaleSku(row.id as number);
    //提示信息
    ElMessage({ type: "success", message: "上架成功" });
  }
  //发请求获取当前更新完毕的全部已有的SKU
  getHasSku(pageNo.value);
};

//更新已有的SKU
const updateSku = debounce(() => {
  ElMessage({ type: "success", message: "程序员在努力的更新中...." });
}, 500);

// 查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
  drawerLoad.value = await true;
  drawer.value = true;
  // 获取已有商品详情数据
  let result: SkuInfoData = await reqSkuInfo(row.id as number);
  if (result.code === 200) {
    // 存储已有的SKU
    skuInfo.value = result.data;
  }
  drawerLoad.value = await false;
};

// 删除已有的商品
const removeSku = async (id: number) => {
  // 删除某一个已有商品的情况
  let result: any = await reqRemoveSku(id);
  if (result.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getHasSku(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
  } else {
    ElMessage({
      type: "success",
      message: "删除失败",
    });
  }
};
</script>
<style scoped lang="scss">
.sku_table {
  margin: 16px 0;

  .sku_table-img {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    margin: 0 auto;

    img {
      width: 100px;
    }
  }
}

.sku_drawer {
  .el-row {
    margin-bottom: 16px;

    .sku_drawer-tag {
      margin-left: 6px;
    }

    .sku_drawer-image {
      width: 100%;
    }
  }
}

// 轮播图样式
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
